<div class="bs-docs-section" ng-controller="PopoverDemoCtrl">

  <div class="page-header">
    <h1 id="popovers">Popovers <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/popover/popover.js" target="_blank">popover.js</a>
    </h1>
    <code>mgcrea.ngStrap.popover</code>
  </div>


  <h2 id="popovers-examples">Examples</h2>
  <p>Add small overlays of content on tap, like those on the iPad, to any element for housing secondary information.</p>

  <div class="callout callout-danger">
    <h4>Plugin dependency</h4>
    <p>Popovers require the <a href="#tooltips">tooltip module</a> to be loaded.</p>
  </div>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="popover/docs/popover.demo.html" data-content-js-url="popover/docs/popover.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>
  <div class="form-group hide">
    <label>Title</label>
    <input type="text" class="form-control" ng-model="popover.title" placeholder="Title">
    <label>Content</label>
    <textarea class="form-control" ng-model="popover.content" rows="3"></textarea>
  </div>
  <pre class="bs-example-scope">$scope.popover = {{popover | json}};</pre>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>
    <!-- Button to trigger a default popover with a scope as an object {title:'', content:'', etc.} -->
    <button type="button" class="btn btn-lg btn-primary" data-placement="bottom" data-animation="am-flip-x" bs-popover="popover">Click to toggle popover
      <br />
      <small>(using an object)</small>
    </button>

    <!-- You can also use data-attrs to assign scope variables -->
    <button type="button" class="btn btn-lg btn-primary" data-placement="top-right" title="{{popover.title}}" data-content="{{popover.content}}" data-trigger="focus" bs-popover>Click to toggle popover
      <br />
      <small>(using data-attrs)</small>
    </button>

    <!-- You can use a custom html template with the `data-template` attr -->
    <button type="button" class="btn btn-lg btn-danger" title="{{popover.title}}" data-content="{{popover.content}}" data-template-url="popover/docs/popover.demo.tpl.html" data-animation="am-flip-x" data-auto-close="1" bs-popover>Custom Popover
      <br />
      <small>(using data-template)</small>
    </button>

    <!-- A popover can also be triggered programmatically using the $popover service -->
    <button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover
      <br />
      <small>(using $popover service)</small>
    </button>
  </div>

  <h2 id="popovers-usage">Usage</h2>
  <p>Append a <code>bs-popover</code>attribute to any element to enable the directive.</p>
  <div class="callout callout-info">
    <h4>The module exposes a <code>$popover</code>service</h4>
    <p>Available for programmatic use (mainly in directives as it requires a DOM element).</p>
    <div class="highlight">
      <pre>
        <code class="javascript" highlight-block>
          var myPopover = $popover(element, {title: 'My Title', content: 'My Content', trigger: 'manual'});
        </code>
      </pre>
    </div>
  </div>

  <h3>Options</h3>
  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object directly on the <code>bs-popover</code> attribute</p>
  <div class="callout callout-info">
    <h4>This module supports exotic placement options!</h4>
    <p>You can position your popover in corners (such as <code>bottom-left</code>) or any other combination two.</p>
    <p>Exotic placement options are not part of the Bootstrap's core, to use them you must use <code>bootstrap-additions.css</code> from the <a href="//github.com/mgcrea/bootstrap-additions" target="_blank">BootstrapAdditions</a> project. This project being not yet fully released, meanwhile, you can use the <a href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css" target="_blank">development snapshot</a> compiled for theses docs.</p>
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>apply a CSS animation powered by <code>ngAnimate</code></td>
        </tr>
        <tr>
          <td>placement</td>
          <td>string</td>
          <td>'right'</td>
          <td>
            how to position the popover - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left.<br>
            When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.
          </td>
        </tr>
        <tr>
          <td>trigger</td>
          <td>string</td>
          <td>'click'</td>
          <td>how popover is triggered - click | hover | focus | manual</td>
        </tr>
        <tr>
          <td>title</td>
          <td>string</td>
          <td>''</td>
          <td>default title value if <code>title</code>attribute isn't present</td>
        </tr>
        <tr>
          <td>content</td>
          <td>string</td>
          <td>''</td>
          <td>default content value if <code>data-content</code>attribute isn't present</td>
        </tr>
        <tr>
          <td>html</td>
          <td>boolean</td>
          <td>false</td>
          <td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
        </tr>
        <tr>
          <td>delay</td>
          <td>number | object</td>
          <td>0</td>
          <td>
            <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
            <p>If a number is supplied, delay is applied to both hide/show</p>
            <p>Object structure is:
              <code>delay: { show: 500, hide: 100 }</code>
            </p>
          </td>
        </tr>
        <tr>
          <td>container</td>
          <td>string | false</td>
          <td>false</td>
          <td>
            <p>Appends the popover to a specific element. Example:
              <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element -&nbsp;which will prevent the popover from floating away from the triggering element during a window resize.</p>
          </td>
        </tr>
        <tr>
          <td>target</td>
          <td>string | DOMElement | false</td>
          <td>false</td>
          <td>
            <p>Position the popover relative to a specific target element.</p>
          </td>
        </tr>
        <tr>
          <td>template</td>
          <td>string</td>
          <td>''</td>
          <td>
            <p>Provide an html template as a string (when templateUrl is falsy).</p>
          </td>
        </tr>
        <tr>
          <td>templateUrl</td>
          <td>path</td>
          <td>'popover/popover.tpl.html'</td>
          <td>
            <p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
            <p>It should be a <code>div.popover</code> element following Bootstrap styles conventions (<a href="//github.com/mgcrea/angular-strap/blob/master/src/popover/popover.tpl.html" target="_blank">like this</a>).</p>
          </td>
        </tr>
        <tr>
          <td>contentTemplate</td>
          <td>path</td>
          <td>false</td>
          <td>
            <p>If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.</p>
          </td>
        </tr>
        <tr>
          <td>autoClose</td>
          <td>boolean</td>
          <td>false</td>
          <td>If provided, auto closes the popover when clicking outside of it.</td>
        </tr>
        <tr>
          <td>id</td>
          <td>string</td>
          <td>''</td>
          <td>
            The popover instance id for usage in event handlers.
          </td>
        </tr>
        <tr>
          <td>onShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the popover is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the popover is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the popover is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the popover is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>viewport</td>
          <td>string | object</td>
          <td>{ selector: 'body', padding: 0 }</td>
          <td>
            <p>
              Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$popoverProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($popoverProvider) {
            angular.extend($popoverProvider.defaults, {
              animation: 'am-flip-x',
              trigger: 'hover'
            });
          })
        </code>
      </pre>
    </div>
  </div>

  <h3>Helper attributes</h3>
  <p>Helper attributes can be used together with the directive via data-attributes to support specific functionality. Helper attributes support data binding. To use helper attributes, append the helper attribute name to <code>data-</code>, as in <code>data-bs-show="true"</code>.</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
      <tr>
        <th style="width: 100px;">Name</th>
        <th style="width: 100px;">type</th>
        <th style="width: 50px;">default</th>
        <th>description</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>bsShow</td>
        <td>boolean | string</td>
        <td>false</td>
        <td>
          <p>shows or hides the popover. Supports boolean values or "true"/"false" string values.</p>
          <p>You can also specify "popover" to show just the popover when using several angular-strap directives on the same element.</p>
        </td>
      </tr>
      <tr>
        <td>bsEnabled</td>
        <td>boolean | string</td>
        <td>true</td>
        <td>
          <p>enables or disables the popover trigger. When the popover is disabled, calling show() will have no effect.</p>
          <p>Supports boolean values or "true" "false" "1" "0" string values.</p>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

  <h3>Scope methods</h3>
  <p>Methods available inside the directive scope to toggle visibility.</p>

  <h4>$show()</h4>
  <p>Reveals the popover.</p>

  <h4>$hide()</h4>
  <p>Hides the popover.</p>

  <h4>$toggle()</h4>
  <p>Toggles the popover.</p>

  <h4>$setEnabled(isEnabled)</h4>
  <p>Enables or disables the popover.</p>

</div>
